<template>
	<section>
		<!--start  面包屑-->
		<div class="location">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
				<el-breadcrumb-item :to="{path:'/goods'}">商品</el-breadcrumb-item>
				<el-breadcrumb-item :to="{path:'/goods/purOrderList'}">采购订单列表</el-breadcrumb-item>
				<el-breadcrumb-item>新增采购订单</el-breadcrumb-item>
			</el-breadcrumb>
			<help-components>
			<span slot="headText">新增采购订单</span>
			<p slot="headDescText"></p>
			<div slot="helpContentWrap">
				<div>
					<h3>其他费用是否会分摊到采购成本？</h3>
					<p>是的，其他费用会根据采购单价分摊到每个商品的采购成本。</p>
				</div>
				<div>
					<h3>是否可根据销售订单自动生成采购订单？</h3>
					<p>此功能正在规划中，敬请期待…</p>
				</div>
			</div>
		  </help-components>
		</div>
		<!--end  面包屑-->

		<div class="order" id="order">
			<div class="ruku-sousuo">
				<div class="ruku-left">
					<el-form :model="PurOrderData" :rules="vue_rule_rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
	  					<el-form-item label="供应商" prop="companyCode">
						  <el-select v-model="PurOrderData.companyCode" placeholder="请输入名称" @change="vue_companyName_select" filterable clearable>
						    <el-option
						      v-for="item in vue_companyName_dataListAll"
						      :label="item.companyName"
						      :value="item.companyCode">
						    </el-option>
						  </el-select>
						</el-form-item>
					</el-form>
				</div>
			</div>
			<div class="order-tab" :class="{border:vue_rule_goodsLength}">
				<table class="order-tab1" border="0" cellspacing="0" cellpadding="0" width="100%">
					<col width="5%" />
					<col width="10%" />
					<col width="20%" />
					<col width="15%" />
					<col width="10%" />
					<col width="10%" />
					<col width="10%" />
					<col width="10%" />
					<tr class="tab-th">
						<td>序号</td>
						<td>商品编码</td>
						<td>商品名称</td>
						<td>规格</td>
						<td>单位</td>
						<td>采购数</td>
						<td>采购单价（元）</td>
						<td>小计（元）</td>
					</tr>
					<tr class="hoverTr" v-for="(item, index) in orderGoodsStr">
						<td>
							<span class="order-num">
								{{index+1}}
							</span>
							<span class="order-add">
								<em class="iconfont" @click="vue_goods_sub(index)">&#xe684;</em>
							</span>
						</td>
						<td>{{item.goodsCode}}</td>
						<td>{{item.goodsName}}</td>
						<td>{{item.goodsSkuValue}}</td>
						<td>{{item.goodsNumUnit}}</td>
						<td><input type="text" class="order-input1" @keydown="vue_rowInput_numberStop($event)" @blur="vue_goods_calcPrice(index,'num')" v-model="item.goodsCheckinNum"></td>
						<td><input type="text" class="order-input1" @keydown="vue_rowInput_numberStop($event)" @blur="vue_goods_calcPrice(index,'pri')" v-model="item.goodsSalePrice"></td>
						<td><input type="text" class="order-input1" @keydown="vue_rowInput_numberStop($event)" @blur="vue_goods_calcPrice(index,'tot')" v-model="item.goodsSubtotal"></td>
					</tr>
					<tr class="hoverTr" >
						<td>{{orderGoodsStr.length+1}}</td>
						<td colspan="2">
							<template>
								<el-select @change="vue_goods_add" filterable v-model="vue_goods_selectVal"  placeholder="输入编码/商品名称" >
									<el-option :disabled="item.disabled" v-for="item in vue_goods_optionList" :key="item.value2" :label="item.goodsName + ' ( '+  item.goodsSkuValue + ' )'" :value="item.companyGoodsCode">
									</el-option>
								</el-select>
							</template>
							<em class="iconfont" style="position: absolute;right: 8px;top: 10px;cursor: pointer;display: none;">&#xe607;</em>
						</td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
					<tr class="dorder-td hoverTr">
						<td>合计</td>
						<td></td>
						<td></td>
						<td></td>
						<td></td>
						<td>{{vue_goods_totalOrderNum}}</td>
						<td></td>
						<td>{{Public.formatMoney(vue_goods_totalOrderMoney,2)}}</td>
					</tr>
					<tr class="dorder-tend">
						<td colspan="8">
							<p>其他金额：<input style="text-indent: 5px;" v-model="vue_goods_totalOtherMoney" /></p>
							<p>应付金额：<span>{{Public.formatMoney(orderMoney,2)}}</span></p>
						</td>
					</tr>
				</table>

			</div>
			<span v-if="vue_rule_goodsLength" style="color: red;">商品不能为空并要填写对应的数量和单价</span>
			<div class="ruku-section">
				<div class="section-left">
					<el-form :model="PurOrderData" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
	  					<el-form-item label="日期" >
						    <el-date-picker
						      v-model="PurOrderData.createDate"
						      type="datetime"
						      placeholder="选择日期">
						    </el-date-picker>
					   </el-form-item>
						<el-form-item label="采购员">
						    <el-input v-model="PurOrderData.transactOpName"></el-input>
						  </el-form-item>
	  					<el-form-item label="制单人">
						 <el-input type="text" disabled v-model="PurOrderData.createOpName"></el-input>
						</el-form-item>
					</el-form>
				</div>
				<div class="section-right">
					<el-form :model="PurOrderData" label-width="100px" class="demo-ruleForm">
	  					<el-form-item label="备注">
						    <el-input type="textarea" v-model="PurOrderData.orderRemark" placeholder="请输入备注信息，最多不超过500个字"></el-input>
						  </el-form-item>
					</el-form>
				</div>
			</div>

			<div class="order-deta">
				<el-button type="primary" :disabled="clickBtn" @click="vue_pur_add">保存</el-button>
				<el-button @click="$router.push({path:'/orderDatalis'})">取消</el-button>
			</div>
		</div>
	</section>
</template>

<script>
	import helpComponents from '../../../components/help/help'
	export default {
		components:{helpComponents},
		data() {
			return {
				clickBtn:false,                 //请求数据后禁用按钮
				/* start 供应商 */
				vue_companyName_dataListAll:[],  //供应商的data
				vue_companyName_companyCode:null,  //最后一次请求供应商品的companyCode
				vue_companyName_dialogShow:true,  //更改供应商时是否显示dialog
				/* end 供应商 */
				/* start 商品 */
				vue_goods_optionList:[],  //所有可购商品
				vue_goods_selectVal:"",  //选择的商品
				vue_goods_num:0,  //记录商品的项目数
				vue_goods_totalOtherMoney :0,  //其他金额
				/* end 商品 */
				/* start 验证 */
				vue_rule_goodsLength:false,  //是否选择了商品
				vue_rule_rules: {
		          	companyCode: [{ required: true, message: '供应商不能为空', trigger: 'change' }],
		        },
				/* end 验证 */
				PurOrderData:{
					companyCode:"",  //供应商
					createDate:"",  //时间
					orderRemark:"",  //备注
					transactOpName:"",  //采购员
					createOpName:"",  //制单人
					orderMoney:0,  //采购金额 ,
					orderGoodsStr:[],  //选择的商品
				},
				orderGoodsStr:[],  //选择的商品
			}
		},
		methods: {
			query_purCompanyData(){  //获取供应商的data
				this.axios({
					method:"POST",
					url:"/v3/pur/companys/listAll",
					data:{
						"dataBillstate":"0", // 查询已启用的供应商
					}
				}).then((res)=>{
					this.vue_companyName_dataListAll = res.data.list;
				}).catch((err)=>{
					this.Public.openError(this,err.response.data)
				})
			},
			query_saleGoodsAll(companyCode){  //请求商品列表
				this.axios({
					method: 'POST',
					url: "/v3/pur/companyGoodss/listAll",
					data:{
						"companyCode":companyCode
					}
				}).then((res) => {
					this.vue_companyName_companyCode = companyCode;
					this.vue_goods_optionList = res.data.list;
					this.vue_goods_optionList.forEach((item)=>{
						item.disabled = false;
					})
				}).catch((err)=>{
					this.Public.openError(this,err.response.data)
				});
			},
			query_saleGoods(companyGoodsCode,index){  //请求单个商品
				this.axios({
					method:"GET",
					url:"/v3/pur/companyGoodss/"+companyGoodsCode,
				}).then((res)=>{
					this.$set(this.orderGoodsStr,index,{
						goodsCode:res.data.goodsCode,
						goodsName:res.data.goodsName,
						goodsSkuValue:res.data.goodsSkuValue,
						goodsNumUnit:res.data.goodsNumUnit,
						goodsSalePrice:res.data.goodsSupplyPrice,
						goodsCheckinNum:1,
						goodsSubtotal:res.data.goodsSupplyPrice,
					})
					this.vue_goods_optionList.forEach((item,index,arr)=>{
						this.orderGoodsStr.forEach((itemC,indexC,arrC)=>{
							if(item.goodsCode==itemC.goodsCode){
								item.disabled=true;
							}
						})
					})
					this.orderGoodsStr[index].goodsSubtotal=this.orderGoodsStr[index].goodsSalePrice*this.orderGoodsStr[index].goodsCheckinNum;
				}).catch((err)=>{

				})
			},
			query_createOpName(){  //获取制单人名称
				this.axios({
				method: 'GET',
						url: "/v3/member/operators"
					}).then((res) => {
						this.PurOrderData.createOpName = res.data.operatorName;	// 制单人名称
					}).catch((err)=>{
						this.Public.openError(this,err.response.data)
				});
			},
			vue_companyName_select(val){  //选择
				if(this.vue_companyName_dialogShow){
					if(!!val){
						if(!this.orderGoodsStr.length){
							this.vue_goods_optionList=[];
							this.query_saleGoodsAll(val);
						}else{
							this.$confirm('是否确定修改供应商？修改供应商后，将清除已选择的商品数据。？', '确认', {
						        confirmButtonText: '确定',
						        cancelButtonText: '取消',
						        cancelButtonClass:"fr",
						        confirmButtonClass:"fr",
						        customClass:"clearfixBox"
							}).then(() => {
								this.orderGoodsStr=[];
								this.vue_goods_num=0;
								this.vue_goods_optionList=[];
								this.query_saleGoodsAll(val);
						    }).catch(()=>{
						    	this.vue_companyName_dialogShow=false;
						    	this.PurOrderData.companyCode=this.vue_companyName_companyCode;
						    	setTimeout(()=>this.vue_companyName_dialogShow=true,1)
						    });
						}
					}else{
						if(!this.orderGoodsStr.length){
							this.vue_goods_optionList=[];
						}else{
							this.$confirm('是否确定修改供应商？修改供应商后，将清除已选择的商品数据。？', '确认', {
						        confirmButtonText: '确定',
						        cancelButtonText: '取消',
						        cancelButtonClass:"fr",
						        confirmButtonClass:"fr",
						        customClass:"clearfixBox"
							}).then(() => {
								this.orderGoodsStr=[];
								this.vue_goods_num=0;
								this.vue_goods_optionList=[];
						    }).catch(()=>{
						    	this.vue_companyName_dialogShow=false;
						    	this.PurOrderData.companyCode=this.vue_companyName_companyCode;
						    	setTimeout(()=>this.vue_companyName_dialogShow=true,1)
						    });
						}
					}
				}
			},
			vue_goods_add(companyGoodsCode){  //加商品
				if(companyGoodsCode){
					this.query_saleGoods(companyGoodsCode,this.vue_goods_num);
					this.vue_goods_num++;
					this.vue_goods_selectVal = "";
					this.vue_rule_goodsLength=false;
				}
			},
			vue_goods_sub(index){  //减商品
				this.orderGoodsStr.splice(index,1);
				this.vue_goods_num--;
				if(this.vue_goods_num<=0){
					this.vue_rule_goodsLength =true;
				}
				this.vue_goods_optionList.forEach((item,index,arr)=>{
					this.orderGoodsStr.forEach((itemC,indexC,arrC)=>{
						if(item.goodsCode==itemC.goodsCode){
							item.disabled=true;
						}else{
							item.disabled=false;
						}
					})
				})
			},
			vue_goods_calcPrice(index,type){  //单项商品计算金额
				if('tot'==type){
					if(isNaN(parseFloat(this.orderGoodsStr[index].goodsSubtotal))){
						this.orderGoodsStr[index].goodsSubtotal=0.01;
					}else{
						this.orderGoodsStr[index].goodsSubtotal=parseFloat(this.orderGoodsStr[index].goodsSubtotal).toFixed(2);
					}
					this.orderGoodsStr[index].goodsSalePrice = this.orderGoodsStr[index].goodsSubtotal/this.orderGoodsStr[index].goodsCheckinNum;
					this.orderGoodsStr[index].goodsSalePrice=this.orderGoodsStr[index].goodsSalePrice.toFixed(2);
					this.orderGoodsStr[index].goodsCheckinNum=this.orderGoodsStr[index].goodsCheckinNum.toFixed(3);
				}else if('pri'==type){
					if(isNaN(parseFloat(this.orderGoodsStr[index].goodsSalePrice))){
						this.orderGoodsStr[index].goodsSalePrice=0.01;
					}else{
						this.orderGoodsStr[index].goodsSalePrice=parseFloat(this.orderGoodsStr[index].goodsSalePrice).toFixed(2);
					}
					this.orderGoodsStr[index].goodsSubtotal = this.orderGoodsStr[index].goodsSalePrice*this.orderGoodsStr[index].goodsCheckinNum;
					this.orderGoodsStr[index].goodsSubtotal=this.orderGoodsStr[index].goodsSubtotal.toFixed(2);
					this.orderGoodsStr[index].goodsCheckinNum=this.orderGoodsStr[index].goodsCheckinNum.toFixed(3);
				}else{
					if(isNaN(parseFloat(this.orderGoodsStr[index].goodsCheckinNum))){
						this.orderGoodsStr[index].goodsCheckinNum=1;
					}
					this.orderGoodsStr[index].goodsSubtotal = this.orderGoodsStr[index].goodsSalePrice*this.orderGoodsStr[index].goodsCheckinNum;
					this.orderGoodsStr[index].goodsSubtotal=this.orderGoodsStr[index].goodsSubtotal.toFixed(2);
					this.orderGoodsStr[index].goodsSalePrice=this.orderGoodsStr[index].goodsSalePrice.toFixed(2);
				}
			},
			vue_rowInput_numberStop(e){  //通过阻止默认事件来限制用户只能输入数字
				if(!((e.keyCode>=48&&e.keyCode<=57)||(e.keyCode>=96&&e.keyCode<=105)||(e.keyCode==46)||(e.keyCode==39)||(e.keyCode==9)||(e.keyCode==8)||(e.keyCode==116)||(e.keyCode==13)||(e.keyCode==110)||(e.keyCode==190)))e.preventDefault();
			},
			vue_pur_add(){  //采购订单新增
				this.$refs['ruleForm'].validate((valid)=>{
					if(valid){
						if(this.orderGoodsStr.length){
							this.PurOrderData.orderMoney=this.orderMoney;
							this.vue_companyName_dataListAll.forEach((item,index,arr)=>{
								if(this.PurOrderData.companyCode==item.companyCode){
									this.PurOrderData.companyName=item.companyName;
								}
							})
							this.orderGoodsStr.forEach((item,index,arr)=>{
								this.PurOrderData.orderGoodsStr[index]={};
								this.PurOrderData.orderGoodsStr[index]['goodsCode']=item.goodsCode;
								this.PurOrderData.orderGoodsStr[index]['goodsOrderPrice']=item.goodsSalePrice;
								this.PurOrderData.orderGoodsStr[index]['goodsOrderNum']=item.goodsCheckinNum;
								this.PurOrderData.orderGoodsStr[index]['goodsOrderSubtotal']=item.goodsSubtotal;
							})
							this.clickBtn=!this.clickBtn;
							this.axios({
								method:"POST",
								url:"/v3/pur/orders",
								data:{
									"companyName":this.PurOrderData.companyName,
									"companyCode":this.PurOrderData.companyCode,
									"orderDate":this.PurOrderData.createDate,
									"orderRemark":this.PurOrderData.orderRemark,
									"transactOpName":this.PurOrderData.transactOpName,
									"createOpName":this.PurOrderData.createOpName,
									"orderMoney":this.PurOrderData.orderMoney,
									"goodsMoney":this.vue_goods_totalOrderMoney,
									"orderOtherMoney":this.vue_goods_totalOtherMoney,
									"orderGoodsStr":JSON.stringify(this.PurOrderData.orderGoodsStr),
									"orderNum":this.vue_goods_totalOrderNum
								}
							}).then((res)=>{
								this.clickBtn=!this.clickBtn;
								this.$router.push({path:'/goods/purOrderList'});
							}).catch((err)=>{
								this.clickBtn=!this.clickBtn;
								this.Public.openError(this,err.response.data);
							})
						}else{
							this.vue_rule_goodsLength =true;
						}
					}else{
						return false;
					}
				})
			},
		},
		computed:{
			vue_goods_totalOrderNum:function(){  //所有商品的件数和
				let total = 0;
				if(this.orderGoodsStr.length){
					this.orderGoodsStr.forEach((item,index,arr)=>{
						total += item.goodsCheckinNum*1
					})
				}
				return total;
			},
			vue_goods_totalOrderMoney:function(){  //所有商品的金额和
				let total = 0;
				if(this.orderGoodsStr.length){
					this.orderGoodsStr.forEach((item,index,arr)=>{
						total += item.goodsSubtotal*1
					})
				}
				return total;
			},
			orderMoney:function(){  //应付金额
				return this.vue_goods_totalOtherMoney*1+this.vue_goods_totalOrderMoney*1;
			},
		},
		created(){
			this.query_purCompanyData();  //获取供应商的data
			this.query_createOpName();  //获取制单人
		},
		mounted() {
			//获取窗口高度
			var winHieg = document.documentElement.clientHeight;
			var cont = document.getElementById("order");
			cont.style.height = winHieg - 105 + "px";
		},

	}
</script>

<style scoped>
	@import "../../../assets/css/zijin.css";
	.location {
		padding: 3px 0 15px 0;
	}
	.order {
		background: #fff;
		padding: 5px 20px;
		overflow-y: auto;
		font-family: "微软雅黑";
		position: relative;
	}
	.order-tab{
		margin-top: 15px;
		border-left: 1px solid #e7e9f1;
	}
	.order-tab1 td{
		text-align: center;
		padding: 0px 0;
		border: 1px solid #e7e9f1;
		border-top: 0;
		border-left:0;
		position: relative;
	}
	.order-tab1 td img{
		width: 45px;
		margin: 0 auto;
	}
	.order-tab1 .tab-th td{
		background: #eff1f8;
		padding: 14px 0;
	}
	.order-tab1 .order-input1{
		height: 34px;
		width: 100px;
		border: 1px solid #cdd9e6;
		border-radius:4px ;
		text-align: center;
	}
	.dorder-td td{
		padding: 15px 0;
	}
	.dorder-tend td{
		padding: 12px 15px;
		text-align: right;
	}
	.dorder-tend p span{
		display: inline-block;
		width: 120px;
	}
	.dorder-tend p:last-child span{
		color: #f33333;
		font-size: 20px;
	}
	.dorder-tend p {
		margin-top: 0px;
	}
	.order-deta{
		margin: 20px;
		clear: both;
	}
	.order-deta span{
		margin-right: 10px;
	}
	.order-deta a{
		display: inline-block;
		width: 80px;
		height: 30px;
		text-align: center;
		line-height: 31px;
		border-radius: 20px;
		border: 1px solid #cdd9e6;
		margin-top: 30px;
	}
	.order-deta a:first-child{
		background: rgb(19, 193, 159);
		color: #fff;
		border: 0;
		height: 32px;
		line-height: 32px;
	}
	.order-add{
		display: none;
		cursor:pointer;
	}
	.hoverTr:hover .order-num {
		display: none;
	}

	.hoverTr:hover .order-add {
		display: inline-block;
	}
	.hoverTr td{
		height: 54px;
		padding: 0;
	}
	.ruku-sousuo{
		overflow: hidden;
		margin-top: 15px;

		margin-left: -10px;
	}
	.ruku-sousuo .el-select,.ruku-sousuo .el-date-editor.el-input{
		width: 300px;
	}
	.ruku-left{
		float: left;
	}
	.ruku-right{
		float: left;
	}
	.house{
		color: red;
		position: relative;
		top: 2px;
	}
	.ruku-section{
		overflow: hidden;
		margin-top: 20px;
	}
	.section-left{
		float: left;
		width: 400px;
		margin-left: -10px;
	}
	.section-left .el-select{
		width: 300px;
	}
	.section-left .el-date-editor.el-input{
		width: 300px;
	}
	.section-right{
		float: left;
		width: 400px;
	}
	.order-tab{
		margin-top: 0;
	}
	.border{
		border: 1px solid red;
	}
	.dorder-tend input{
		width: 100px;
		height: 32px;
		border: 1px solid #e7e9f1;
		border-radius:4px ;
		margin-left: 18px;
	}
</style>

